import React from 'react';
import { Pagination } from 'antd';
import cls from 'classnames';
// import style from './index.less';
import './index.less';

const StandardPagination = ({ onChange, pageSizeOptions, isFixed, children, ...values }) => {
  const { total } = values;
  const handleShowSizeChange = (_, size) => {
    if (onChange) {
      onChange({ pageNum: 1, pageSize: size });
    }
  };

  const handlePageChange = (current, size) => {
    if (onChange) {
      onChange({ pageNum: current, pageSize: size });
    }
  };

  const paginationProps = {
    showSizeChanger: true,
    showTotal: (size) => `共 ${size} 条`,
    pageSizeOptions,
    ...values,
    total: +values.total,
  };
  return (
    <div>
      {+total > 0 && (
        <div
          className={cls({
            'sticky-table-pagination-nofixed-wrapper': !isFixed,
            'sticky-table-pagination-fixed-wrapper': isFixed,
          })}
        >
          {children}
          <Pagination
            {...paginationProps}
            onChange={handlePageChange}
            onShowSizeChange={handleShowSizeChange}
          />
        </div>
      )}
    </div>
  );
};
StandardPagination.defaultProps = {
  onChange: null,
  isFixed: false,
  current: 1,
  pageSize: 20,
  pageSizeOptions: ['20', '50', '100', '500'],
  total: null,
};

export default StandardPagination;
